<template>
  <view>
    <view
      @click="goDetail(item)"
      :key="index"
      v-for="(item, index) in list"
      class="lisBox"
    >
      <view class="lis">
        <view class="li_wrap">
          <view class="tit">
            {{ item.title }}
          </view>
        </view>
        <view class="detail">
          <!-- 本公司急招水电安装工需要的抓紧联系我,一天补贴300元 -->
          出售价格：
          <text class="sel">{{ item.buy_price }} 元</text>
        </view>
        <!-- <view class="li_wrap">
					<view class="month">
						刘先生
					</view>
					<view class="day sel">
						已实名
					</view>
				</view> -->
        <view class="phone">
          <view class="left"> 联系电话 </view>
          <view class="right">
            {{ item.tellStatus ? item.tells : item.tell }}
            <view @click.stop="item.tellStatus = false" class="phone">
              <u-icon name="phone"></u-icon>
              免费查看
            </view>
          </view>
        </view>
        <view class="tags">
          <u-icon class="map" name="map"></u-icon>
          <text>{{ item.province }}{{ item.city }}{{ item.district }}</text>
          <!-- 发布于 2小时前 -->
        </view>
        <view class="tags">
          <u-icon class="map" name="clock"></u-icon>
          {{ item.add_time }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {};
  },
  methods: {
    goDetail(item) {
       uni.navigateTo({
          url: `/package/pages/release/secondHandLook?id=${item.id}`,
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.phone {
	display: flex;
	align-items: center;
  font-size: 12px;
  .left {
    color: #999;
    margin-right: 10px;
  }

  .right {
    color: #333;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .phone {
      margin: 0 10px;
      padding: 5px 10px;
      display: flex;
      align-items: center;
      border-radius: 15px;
      background: #efb336;
      color: #fff;
    }

    .tags {
      margin-right: 8px;
      background-color: #f6f7fb;
      color: #545559;
      border: 1px solid #f6f7fb;
      margin-bottom: 5px;
    }
  }
}
.sel {
  color: #ff8a33;
}
.lisBox {
  background: #ffffff;
  margin-top: 4rpx;
}

.lis {
  padding: 30rpx 32rpx 20rpx;
  border-bottom: 1px solid #f7f8fa;

  &:last-child {
    margin-bottom: 0;
  }

  .detail {
    font-size: 24rpx;
    color: #808080;
    margin-bottom: 8rpx;
  }
  .tags {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    margin-bottom: 10rpx;
    color: #999999;
    .map {
      margin-right: 12rpx;
    }
    text {
      margin-right: 80rpx;
    }
  }

  .li_wrap {
    margin-bottom: 14rpx;
    display: flex;
    align-items: center;

    .smallicon {
      display: blocrk;
      width: 40rpx;
      height: 40rpx;
    }

    .tit {
      flex: 1;
      font-size: 14px;
      font-weight: bold;
      color: #333333;
    }

    .day {
      padding: 2px 5px;
      background: #f5f5f5;
      border-radius: 6rpx;
      font-size: 20rpx;
      color: #808080;
      margin-left: 23rpx;

      font-weight: bold;
      &.sel {
        color: #ff8a33;
      }
    }

    .month {
      font-size: 28rpx;
      font-weight: bold;
      color: #1a1a1a;
    }
  }
}

.bots {
  display: flex;
  align-items: center;
  padding: 16rpx 32rpx;

  .img {
    display: block;
    width: 60rpx;
    height: 60rpx;
    margin-right: 10rpx;
    border-radius: 3px;
  }

  .companyName {
    font-size: 12px;
    color: #333333;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
</style>
